<template>
	<!-- 安全检查 -->
	<view>
		
		<view class="vinav">
			<view :class="[buclickstate==true ? 'vinaview' :'vinaview2']"   @click=" buclick(1)"  >分项检查</view>
			<view :class="[buclickstate==true ? 'vinaview2' :'vinaview']"  @click=" buclick(2)" >日常检查</view>
		</view>
		
		
		<view class="list" style="padding-top: 72rpx;">
			<view class="flex_col" @longpress="onLongPress" :class="{'active':pickerUserIndex==index}"
			 @tap="listTap(item.loginName,index)"
			 v-for="(item,index) in userList"
			 :key="index" :data-index="index">
				<!-- <image :src="item.imgPath" mode="aspectFill"></image> -->
				<view v-if="item.handingSuggestion=='警告'" class="iconfont" style="color: #FBAA58;font-size: 75rpx;">&#xe652;  &nbsp;</view>
				<view v-if="item.handingSuggestion=='通过'" class="iconfont" style="color: #007AFF;font-size: 75rpx;">&#xe679;   &nbsp;</view>
				<view v-if="item.handingSuggestion=='整改'" class="iconfont" style="color: #DD524D;font-size: 75rpx;">&#xe68a;   &nbsp;</view>
				<view class="flex_grow">                   
					<view class="flex_col">
						<view class="flex_grow" style="padding-left: 20rpx;">{{item.remarks}}</view>
						<view class="time">{{item.createDate}}												
						</view>
					</view>
					<!-- <view class="info">{{item.info}}</view> -->
				</view>
			</view>
		</view>
		<view class="shade" v-show="showShade" @tap="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showPop}">
				<view v-for="(item,index) in popButton" :key="index" 
				@tap="pickerMenu"
				 :data-index="index">{{item}}</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				userList: [], 
				//userListto:[], //日常
				/* 窗口尺寸 */
				winSize: {},
				/* 显示遮罩 */
				showShade: false,
				/* 显示操作弹窗 */
				showPop: false,
				/* 弹窗按钮列表 */
				popButton: ["通过","取消"],
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1,
				buclickstate:true
			}
		},
		onLoad(option){
			uni.showLoading({
				title:"数据加载..",
				mask:true	
			})
			_this=this;
			console.log(option);
			this.getListData();
			this.getWindowSize();
			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif

		},
		//监听导航栏 点击事件
		onNavigationBarButtonTap(e) {		   
		    let check=0;
		    if(_this.buclickstate){
		    	check=1;
		    	  console.log("添加安全检查2---分项")  
		    }else{
		    	check=2;
		    	  console.log("添加安全检查2---日常")  
		    }
		    
		     uni.navigateTo({
		     	url: '../newCheck/newCheck?type=2&check='+check
		     }) 
		},
		methods: {
			getCheckInfoDate:function(type){
				 const value = uni.getStorageSync("JSESSIONID");
				 const val = uni.getStorageSync("pathHost");
				 let list=[];		
					_this.userList=[];				 
				 uni.request({
				 	url: val+'/ggcapp/safetymanagement/checkinfo/checkInfo/data'+";JSESSIONID="+value+"?__ajax=true&mobileLogin=true&pageSize=999&type="+type ,
				 	success(data) {						
					   for (var i = 0; i < data.data.rows.length; i++) {
					   	   let time=data.data.rows[i].createDate.substring(0,10);
						   let rem= data.data.rows[i].remarks.length>=17?data.data.rows[i].remarks.substring(0,17)+'...':data.data.rows[i].remarks;
						   if(rem==null || rem ==""){
							   rem="未读到数据";
						   }
						   list.push({
							   id: data.data.rows[i].id,
							   createDate:time,
							   remarks:rem,
							   handingSuggestion: data.data.rows[i].handingSuggestion
						   })
						
						
					   }
					 
					  _this.userList=list;
					   uni.hideLoading();
					   
					   
				 			
				 	}
				 })
				
			},
			buclick:function(e){
				if(e==1){
					uni.showLoading({
						title:"数据加载..",
						mask:true	
					})
					_this.buclickstate=true;
					_this.getCheckInfoDate(1);
				}else if(e==2){
					uni.showLoading({
						title:"数据加载..",
						mask:true	
					})
					_this.buclickstate=false;
					_this.getCheckInfoDate(2);
				}
				
				
				
			},
			/* 列表触摸事件 */
			//用户名,权限
			listTap(username,index) {
				/* 因弹出遮罩问题，所以需要在遮罩弹出的情况下阻止列表事件的触发 */
				if (this.showShade) {
					return;
				}
				console.log("列表触摸事件触发"+username+"==下标:"+index)		
				
				
					
			},
			/* 获取列表数据 */
			getListData() {
				_this.getCheckInfoDate(1);
			  
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 长按监听 */
			onLongPress(e) {
				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];
			
				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:${this.winSize.witdh-touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}
			
				this.popStyle = style;
				this.pickerUserIndex = Number(index);
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			/* 隐藏弹窗 */
			hidePop() {
				this.showPop = false;
				this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 250);
			},
			/* 选择菜单 */
			pickerMenu(e) {
				let index = Number(e.currentTarget.dataset.index);
				 console.log(`第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`);
				// 在这里开启你的代码秀
			    const groupIn=_this.userList[this.pickerUserIndex];
			     console.log(groupIn )
			     if(index==0){  //移出群聊
			
					 uni.showToast({
						title: `第${this.pickerUserIndex+1}个用户,第${index+1}个按钮`,
						icon: "none",
						mask: true,
						duration: 1600
					}); 
					 
				 }
				
				/* 
				 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
				 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
				 */
				this.hidePop();
			}
		}
	}
</script>


<style  scoped lang="scss">



  .vinav{
		  position: fixed;
		  width: 100%;
		  height: 72rpx;
		  background-color: white;
		  z-index: 99;
		  display: flex;
		  
  }
  .vinav>view{
	  flex: 1;
	  text-align:center;
	  line-height: 72rpx;
	  
  }
  .vinaview {
	  border-bottom: 1px solid #007AFF;
  }
  .vinaview2 {
  	  border-bottom: 1px solid #B2B2B2;
  }

/* .list{
	  width: 100%;
	  height: 100rpx;
	  display: flex;
	  flex: 6;
	  text-align: center;
	  background-color: white;

	 
  }
  /* .list:hover{
	//  background-color: #C8C7CC;
	  
  } */
  
  /* .list-img{
	  flex: 1;

	  border-bottom: 1px solid #C8C8CD;
  }
  .list-img>image{
	  width: 80rpx;
	  height: 80rpx;
	  border-radius: 50%;
	  background-color: #DCDEE2;
	  margin-top: 20rpx;
	  position:relative;
	  top: -10rpx;
  }
   .list-name{
	   flex: 5;
	   text-align: left;
	   font-size: 33rpx;
	   line-height: 105rpx;
	     border-bottom: 1px solid #C8C8CD;
   } */ 
   
   /* 列式弹性盒子 */
   .flex_col {
   	display: flex;
   	flex-direction: row;
   	flex-wrap: nowrap;
   	justify-content: flex-start;
   	align-items: center;
   	align-content: center;
   }
   
   /* 弹性盒子弹性容器 */
   .flex_col .flex_grow {
   	width: 0;
   	-webkit-box-flex: 1;
   	-ms-flex-positive: 1;
   	flex-grow: 1;
   }
   
   .flex_row .flex_grow {
   	-webkit-box-flex: 1;
   	-ms-flex-positive: 1;
   	flex-grow: 1;
   }
   
   /* 弹性盒子允许换行 */
   .flex_col.flex_wrap {
   	-ms-flex-wrap: wrap;
   	flex-wrap: wrap;
   }
   
   /* 列表 */
   .list {
   	background-color: #fff;
   	font-size: 28upx;
   	color: #333;
   	user-select: none;
   	touch-callout: none;
   
   	&>view {
   		padding: 24upx 30upx;
   		position: relative;
   
   		&:active,
   		&.active {
   			background-color: #f3f3f3;
   		}
   
   		image {
   			height: 80upx;
   			width: 80upx;
   			border-radius: 4px;
   			margin-right: 20upx;
   		}
   
   		&>view {
   			line-height: 40upx;
   
   			.time,
   			.info {
   				color: #999;
   				font-size: 24upx;
   			}
   
   			.time {
   				width: 150upx;
   				text-align: right;
   			}
   
   			.info {
   				overflow: hidden;
   				text-overflow: ellipsis;
   				white-space: nowrap;
   			}
   		}
   	}
   
   	&>view:not(:first-child) {
   		margin-top: 1px;
   
   		&::after {
   			content: '';
   			display: block;
   			height: 0;
   			border-top: #CCC solid 1px;
   			width: 620upx;
   			position: absolute;
   			top: -1px;
   			right: 0;
   			transform:scaleY(0.5);	/* 1px像素 */
   		}
   	}
   }
   
   /* 遮罩 */
   .shade {
   	position: fixed;
   	z-index: 100;
   	top: 0;
   	right: 0;
   	bottom: 0;
   	left: 0;
   	-webkit-touch-callout: none;
   
   	.pop {
   		position: fixed;
   		z-index: 101;
   		width: 200upx;
   		box-sizing: border-box;
   		font-size: 28upx;
   		text-align: left;
   		color: #333;
   		background-color: #fff;
   		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   		line-height: 80upx;
   		transition: transform 0.15s ease-in-out 0s;
   		user-select: none;
   		-webkit-touch-callout: none;
   		transform: scale(0, 0);
   
   		&.show {
   			transform: scale(1, 1);
   		}
   
   		&>view {
   			padding: 0 20upx;
   			overflow: hidden;
   			text-overflow: ellipsis;
   			white-space: nowrap;
   			user-select: none;
   			-webkit-touch-callout: none;
   
   			&:active {
   				background-color: #f3f3f3;
   			}
   		}
   	}
   }
   
   
   
</style>

